<template>
  <div class="con">
    <!-- <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="5"
      linesColor="#FDFEFE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="180"
      :moveSpeed="10"
      :hoverEffect="true"
      hoverMode="repulse"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>-->
    <div class="div">
      <div class="head">
        <div class="login" :class="{Aclass:isAclass}" @click="dlogin">账户登录</div>
        <div class="zhuce" :class="{Aclass:isBclass}" @click="dzhuce">账户注册</div>
      </div>

      <div class="login1" v-if="login">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm form"
        >
          <el-form-item prop="pass">
            <i class="el-icon-user"></i>
            <el-input placeholder="用户名" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <i class="el-icon-lock"></i>

            <el-input
              placeholder="密码"
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- f 滑块验证  -->
          <el-form class="form-wrapper" ref="myForm" :model="myForm" label-width="110px">
            <el-form-item label>
              <div>
                <slider ref="slider"></slider>
              </div>
            </el-form-item>
            <!-- <el-form-item>
            <el-button type="primary" @click="toSubmit">提交</el-button>
            </el-form-item>-->
          </el-form>
          <!-- f -->
          <el-form-item>
            <el-button class="tijiao" type="primary" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="zhuce1" v-else>
        <!-- f-二维码 -->
        <img src="../../static/img/hb二维码.png" alt width="200px" height="200px" />
      </div>
    </div>
  </div>
</template>
<script>
//引入滑块验证页面
import http from "../api";
import axios from "axios";
import slider from "../pages/slider";
export default {
  //滑块验证组件
  components: {
    slider,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      // 滑块验证
      myForm: {},

      isAclass: true,
      isBclass: false,
      login: true,
      ruleForm: {
        pass: "",
        checkPass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },

  methods: {
    dlogin() {
      (this.login = true), (this.isAclass = true), (this.isBclass = false);
    },
    dzhuce() {
      (this.login = false), (this.isAclass = false), (this.isBclass = true);
    },
    submitForm(formName) {
      console.log(this.ruleForm.pass);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          http
            .userLogin({
              admin_account: this.ruleForm.pass,
              admin_password: this.ruleForm.checkPass,
            })
            .then((res) => {
              console.log(res);
              console.log("这是", res.data);
              sessionStorage.setItem("userToken", res.data.userToken);
              sessionStorage.setItem("people_id", res.data.people_id);
              sessionStorage.setItem("people_name", res.data.people_name);
              sessionStorage.setItem("people_url", res.data.people_url);
          // alert('登录成功');
              this.$router.push({
                // name:'人员管理'
                name: "控制台",
              });
            });
             } else {
         return false;
            // alert('登录失败');
        }
        //滑动验证
        if (this.$refs["slider"]) {
          // 未通过验证时，提示错误信息并返回
          if (!this.$refs["slider"].confirmSuccess) {
            this.$message.error("请拖动滑块验证");
            return;
          }
        }
        // 通过验证后提交
        // TO DO ...
        // this.$message.success("验证成功，可提交");
      });
    },
    // input1(){

    // }
  },
};
</script>
<style >
/* 修改登录页背景颜色 */
.con {
  width: 100%;
  height: 722px;
  /* height: 650px; */
  /* background-color: rgb(8, 18, 75); */
  /* background-image: linear-gradient(-90deg, rgb(31, 37, 71), rgb(20, 32, 99)); */
 background-image: url("../../static/img/黑蓝1主背景.jpg");
  position: relative;
  /* background: url("../../static/img/4.jpg") no-repeat ; */
  background-position: center;
  background-size: 100%;
  /* background: #5D6FCB; */
}
.div {
  width: 400px;
  height: 400px;
  background-color: RGB(20,27,79);
  /* opacity: 0.7; */
  /* background: rgb(20, 27, 79, 0.7); */

  /* border: 1px solid rgb(25, 52, 119); */

  position: absolute;
  left: 63%;
  top: 19%;
}
.head {
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: space-evenly;
  color: white;
  font-size: 14px;
  /* background: red; */
}
.login {
  width: 96px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
}
.Aclass {
  /* color: rgb(20, 94, 244); */
  color: #409eff;
  font-size: 16px;
  border-bottom: 2px solid #409eff;
}
/* .Bclass{
     color: white; 
    color: rgb(20,94,244);
    font-size: 16px;
    border-bottom: 2px solid  rgb(20,94,244);
  } */
.zhuce {
  width: 96px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
}
.zhuce1 {
  margin-left: 100px;
  margin-top: 50px;
}
.form {
  margin-top: 20px;
  position: relative;
  left: -43px;
}
.el-icon-user {
  font-size: 18px;
  color: #c0c4cc;
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
}
.el-icon-lock {
  font-size: 18px;
  color: #c0c4cc;
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
}
.el-input__inner {
  padding-left: 35px;
}
.tijiao {
  width: 300px;
  position: absolute;
  top: 60px;
  /* background: red;  */
}
/* 滑块验证 */
.form-wrapper {
  /* margin-top: 300px; */
  width: 407px;
  position: absolute;
  top: 120px;
  left: -10px;
}
</style>